<template>

    <div class="marquee-wrap" ref="marquee-wrap">
      <div class="scroll" v-for="(item,index) in msg" :key="index" ref="scroll">
        <p class="marquee" >{{item}}</p>
      </div>

    </div>
</template>

<script>
export default {
  name: 'marquee',
  props: ['val'],
  watch: {
    text(val){
      this.msg.push("ceshi"+val)
    },
    val(val){
      console.log("val被触发")
      this.msg.push(val)

      console.log(this.msg)
    },
    windowWidth (val) {
      let that = this;
      console.log("实时屏幕宽度：",val, that.windowWidth );
    }
  },
  data () {
    return {

      show:false,
      msg:["陈锦银","陈金银12","chenjinyin3"],
      timer: null,
      text: '',
      windowWidth: document.documentElement.clientWidth,
    }
  },

  created () {
    let timer = setTimeout(() => {
       this.move()
      clearTimeout(timer)
    }, 1000)
  },

  mounted () {

    for (let item of this.val) {
      this.text += item
    }
    var that = this;
    // <!--把window.onresize事件挂在到mounted函数上-->
    window.onresize = () => {
      return (() => {
        window.fullHeight = document.documentElement.clientHeight;
        window.fullWidth = document.documentElement.clientWidth;

        that.windowWidth = window.fullWidth; // 宽
      })()
    };
  },
  methods: {
    move () {

      let maxWidth = this.$refs['marquee-wrap']

      console.log(maxWidth)
      //let width = this.$refs['getWidth'].scrollWidth
      //console.log(width);
      let scroll = this.$refs['scroll']
      console.log(scroll)
      let distance = 0
      this.timer = setInterval(() => {
        distance -= 1
        if (-distance >= this.windowWidth) {
          distance = 16

        }


        maxWidth.style.transform = 'translateX(' + distance + 'px)'
      }, 20)
    }
  },
  beforeDestroy () {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.marquee-wrap {

  /*overflow: hidden;*/
  position: fixed;
  right: 0;
  z-index: 999;
  display: flex;
  justify-content: flex-end;
}
.marquee{
  margin-right: 0.16rem;
  color: #ffffff;
}
p {
  word-break:keep-all;
  white-space: nowrap;
  font-size: 0.28rem;
}
.scroll {
  overflow: hidden;
  height: 10px;
}
.getWidth {
  word-break:keep-all;
  white-space:nowrap;
  position: absolute;
  opacity: 0;
  top: 0;
}
</style>
